<template>
  <!-- 最大盒子 -->
  <s-layout :tabbarshow="false" id="layout" navbar="normal" :title="'下级列表'" :autoBack="true" leftIconColor="$uni-text-color"
    :bgColor="'#ffffff'" :titleStyle="{ color: '$uni-text-color', fontSize: '32rpx', fontWeight: '600' }">
    <!-- 最大盒子 -->
    <view class="max_box" :style="{ paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
      <!-- 搜索 && 是否结算 盒子 -->
      <view class="top_box">
        <view class="area search_box">
          <s-search-keyword :border="'1px solid rgba(0, 56, 247, 0.3)'" :placeholder="'搜索员工'"
            @searchKeyWord="searchKeyWord"></s-search-keyword>
        </view>
        <!-- 列表 -->
        <view>
          <scroll-view @scrolltolower='listScrolltolower' scroll-y class="scroll_box " v-if="list.length"
            show-scrollbar="true" :refresher-enabled="isOpenRefresh" :refresher-triggered="triggered"
            :refresher-threshold="100" refresher-background="white" @refresherpulling="onPulling"
            @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort" @scroll="onScroll">
            <view v-for="i in list" :key="i.id">
              <view class="list_item_title">
                <image :src="`${baseUrl}/uploads/uniapp_image/user/bancidetails_icons_zhizhao.png`" mode="scaleToFill"
                  v-if="i.source == 1" />
                <image :src="`${baseUrl}/uploads/uniapp_image/user/bancidetails_icons_dailiren.png`" mode="scaleToFill"
                  v-else />
                <view class="titlename">{{ i.title }} </view>
              </view>

              <view class="Agency_amount_box" v-if="i.source == 2">
              <view class="left_box">
                <view :class="!i.agent || (i.agent && i.agent.agent_man_salary == 0 && i.agent.agent_woman_salary == 0) ? 'Is_not_set' : 'have_set'">
                  {{ !i.agent || (i.agent && i.agent.agent_man_salary == 0 && i.agent.agent_woman_salary == 0) ? '未设置' : '已设置' }}
                </view>
                <view class="image">
                  <image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/wodedaili_icon_jine@2.png`" mode="scaleToFill"/>
                </view>
                <view class="caption_text">代理商金额(男/女)：</view>
                <view class="money">{{ i.agent !== null ? i.agent.agent_man_salary_max : i.schedule.agent_man_salary }}/{{ i.agent !== null ? i.agent.agent_woman_salary_max : i.schedule.agent_woman_salary }}</view>
              </view>
              <view class="right_box" @tap="change_agent_amount(i)" v-if="i.schedule.state <= 1">
                <view class="image">
                  <image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/wodedaili_icon_jinexiugai@2.png`" mode="scaleToFill"/>
                </view>
                <view class="edit_box">修改</view>
              </view>
            </view>



              <view v-for="(item, index) in i.list" :key="index">
                <view class="list_item">
                  <!-- 头像 -->
                  <view class="head_box">
                    <image :src="`${baseUrl}` + item.user.avatar" mode="aspectFill" />
                  </view>
                  <!-- 信息盒子 -->
                  <view class="message_box">
                    <view class="message_title">{{ item.user.nickname }}</view>
                    <view class="message_identity">{{ item.user.authentication.identity_id }} {{item.user.authentication.gender == 0 ? '女' : '男' }}</view>
                  </view>
                </view>
              </view>
            </view>
            <!-- 正在加载组件 -->
            <view>
              <s-loadmore-gather :current_page="listPage" :last_page="listlast_page"
                ref="loadmoreRef"></s-loadmore-gather>
            </view>
          </scroll-view>
          <u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无内容"></u-empty>
        </view>
      </view>
    </view>
    <!-- 设置金额弹出层 -->
    <s-public-models :show="popshows" 
      :imagesucceedSrc="dataToinformaion.imageSrc" 
      :subtitle="dataToinformaion.subtitle"  
      :hint="dataToinformaion.hint" 
      :editAgency="true"
      @cancel="manhourClose" 
      @affirm="manhourSubmit"
      :click_type="dataToinformaion.click_type" :list="edit_list">
    </s-public-models>
  </s-layout>
</template>
<script setup>
import { baseUrl } from '@/sheep/config';
import { onLoad, onShow } from "@dcloudio/uni-app";
import { reactive, ref, computed } from "vue";
import tools from '@/sheep/helper/tools.js';
import sheep from "@/sheep";
// 获取系统信息
const { safeAreaInsets } = uni.getSystemInfoSync();
const user_id = sheep.$store('user').userInfo.id
const schedule_id = ref()
onLoad((options) => {
  schedule_id.value = options.schedule_id
  getIndex()
});
//搜索
const keyword = ref()
const searchKeyWord = (srarch_value) => {
  list.value = []
  listpagenumber.value = 1
  keyword.value = srarch_value

  getIndex()
}

//请求数据
//人员列表

const list = ref([])//代理上列表
const listPage = ref()
const listlast_page = ref();
const listpagenumber = ref(1);

const getIndex = async () => {
  let params = {
    page: listpagenumber.value,
    filter: JSON.stringify({
      'user.nickname': keyword.value,
    }),
    op: JSON.stringify({
      'user.nickname': 'LIKE',
    }),
    schedule_id: schedule_id.value
  }
  const res = await sheep.$api.project.getScheduleUserIndex(params);
  if (res.code == 1) {
    list.value = [...list.value, ...res?.data.rows];
    listPage.value = res.data.current_page
    listlast_page.value = res.data.last_page
  }
}

//滚动触底
const loadmoreRef = ref()
const listScrolltolower = () => {
  loadmoreRef.value.PopupScrolltolower()
  if (listPage.value < listlast_page.value) {
    listpagenumber.value += 1;

  } else {
    return;
  }
  getIndex();
};
// 页面下拉刷新
const freshing = ref(false)
const triggered = ref(false)
const isOpenRefresh = ref(true)  // 是否开启下拉
// 自定义下拉刷新控件被下拉
const onPulling = (e) => {
  if (e.detail.deltaY < 0) return  // 防止上滑页面也触发下拉
  triggered.value = true;
}
// 自定义下拉刷新被触发
const onRefresh = () => {
  if (freshing.value) return;
  freshing.value = true;
  setTimeout(() => {
    listpagenumber.value = 1;
    list.value = []
    triggered.value = false;
    freshing.value = false;
    getIndex();
  }, 500);
}
// 自定义下拉刷新被复位
const onRestore = () => {
  triggered.value = 'restore'; // 需要重置
  // console.log("onRestore");
}
// 自定义下拉刷新被中止
const onAbort = () => {
  // console.log("onAbort");
}


// 修改代理商金额
const edit_ids=ref()
  const edit_list = ref()
  const share_id = ref()
  const change_agent_amount = (e) => {
    share_id.value = e.share_id
    if(e.agent) {
      edit_list.value = e.agent
       dataToinformaion.value.click_type ='agencyCap'
    } else {
      edit_list.value = e.schedule
       dataToinformaion.value.click_type ='agency'
    }
    edit_ids.value = e.schedule.id
    popshows.value = true
   
    dataToinformaion.value.subtitle = '修改代理商金额'
    dataToinformaion.value.hint =  '修改金额后会覆盖已修改的金额'
    dataToinformaion.value.imageSrc = '/uploads/uniapp_image/staff/piliangshezhi_img_bg2.png'
  }
  // 修改代理商金额
    //工时弹窗
    const popshows = ref(false)


    const dataToinformaion = ref({
        subtitle: '',
        imageSrc: '',
        hint:'',
        click_type:''
    })
    // 取消按钮
    const manhourClose = (e) =>{
        popshows.value = e
    }
    // 提交批量更改按钮 此处参数 e 为输入值 参数 i 为判断是什么值 如果为 salary 为批量设置金额 如果为 man_hour 则是批量设置工时
    const manhourSubmit = async(e,i,a)=> {
        let params ={
            share_id: share_id.value,
            schedule_id: edit_ids.value,
            agent_man_salary_max:e,
            agent_woman_salary_max:a
        }
        const res = await sheep.$api.agency.editAgentByScheduleid(params);
        if(res.code == 1){
            sheep.$helper.toast(res.msg);
            setTimeout(()=>{
              list.value = []
              listpagenumber.value = 1      
              getIndex() 
              popshows.value = false
            },500)
        } else {  
            sheep.$helper.toast(res.msg);
        }
    }

</script>

<style scoped lang="scss">
page {
  width: 100%;
  height: 100%;
}

// 版心
.area {
  width: calc(100% - 40rpx);
  margin: 0 20rpx;
}

:deep(.u-form-item__body.data-v-b4fd400b) {
  padding: 20rpx 0 20rpx 30rpx;
}

:deep(.u-form-item__body__left__content__label.data-v-b4fd400b) {
  font-weight: $uni-font-weight;
}

:deep(.u-form-item__body__right__message.data-v-b4fd400b) {
  margin-left: 200rpx !important;
}





// 列表
.scroll_box {
  width: calc(100% - 40rpx);
  margin: 45rpx auto 20rpx auto;
  height: 79vh;
  border-radius: 16rpx;
  background-color: #FFFFFF;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
}

// 列表项
.list_item {
  height: 154rpx;
  display: flex;
  align-items: center;
  margin: 0 30rpx 10rpx 30rpx;
  position: relative;

  // 头像盒子
  .head_box {
    width: 104rpx;
    height: 104rpx;

    image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  // 信息盒子
  .message_box {
    margin-left: 30rpx;

    .message_title {
      font-family: PingFangSC;
      color: $uni-text-color;
      font-weight: $uni-font-weight;
      font-size: 30rpx;
      font-style: normal;
      text-decoration: none;
      margin-bottom: 4rpx;
    }

    .message_identity {
      font-family: PingFangSC;
      color: #999999;
      font-weight: 400;
      font-size: $uni-font-size-sm;
      font-style: normal;
      text-decoration: none;
      margin-bottom: 10rpx;
    }

    .message_time {
      font-family: PingFangSC;
      color: $uni-text-color;
      font-weight: 500;
      font-size: $uni-font-size-sm;
      font-style: normal;
      text-decoration: none;
      display: flex;
      align-items: center;

      image {
        width: 38rpx;
        height: 38rpx;
      }

      text {
        display: block;
        margin-left: 10rpx;
        color: $uni-color-primary;
        font-weight: 400;
        font-size: 22rpx;
      }
    }

  }
}

.list_item:first-child {
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;
  margin-top: 30rpx;
}

.list_item:last-child {
  border-bottom-left-radius: 16rpx;
  border-bottom-right-radius: 16rpx;
  margin-bottom: 0;
}





// 底部占位盒
.placeholder_bottom {
  height: 220rpx;
  width: 100%;
  margin-top: 20rpx;
}




// 执照员工代理商
.list_item_title {
  padding: 0 30rpx;
  height: 60rpx;
  margin-top: 30rpx;
  display: flex;
  align-items: center;

  image {
    width: 30rpx;
    height: 30rpx;
  }
  .titlename {
    color: $uni-text-color;
    font-weight: 500;
    font-size:$uni-font-size-26;
    margin-left: 20rpx;
  }

}

// 头部盒子
.top_box {
  height: 80rpx;
  background-color: #ffffff;
  padding: 20rpx 0;
}

// 代理金额盒子
.Agency_amount_box {
  margin: 0 30rpx;
  font-family: PingFangSC;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
	background-color: #F9FBFF;
  height: 52rpx;
  .left_box {
    display: flex;
    align-items: center;
    .caption_text {
      color: #333333;
      font-size: 22rpx;
      font-weight: 500;
    }
    .money  {
      color: #FF0000;
      font-size: 22rpx;
      font-weight: 600;
    }
    .image {
      margin-left: 12rpx;
      width: 24rpx;
      height: 24rpx;
      display: flex;
      align-items: center;
      margin-right: 12rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .right_box {
    display: flex;
    align-items: center;
    margin-right: 10rpx;
    .edit_box {
      font-family: PingFangSC;
      color: #0038F7;
      font-weight: 500;
      font-size: 22rpx;
      font-style: normal;
      text-decoration: none;
      text-align: left;
    }
    .image {
      width: 24rpx;
      height: 24rpx;
      display: flex;
      align-items: center;
      margin-right: 10rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}

// 已设置
.have_set {
  font-family: PingFangSC;
  color: #0038F7;
  font-weight: 400;
  font-size: 20rpx;
  font-style: normal;
  text-decoration: none;
  text-align: center;
  border-radius: 4px;
  background-color: #FFFFFF;
  border: 1px solid #0038F7;
  width: 70rpx;
  height: 28rpx;
}

// 未设置
.Is_not_set {
  font-family: PingFangSC;
  color: #FFFFFF;
  font-weight: 400;
  font-size: 20rpx;
  font-style: normal;
  text-decoration: none;
  text-align: center;
  border-radius: 4px;
  background-color: #FF5100;
  width: 70rpx;
  height: 28rpx;
}

</style>